<!DOCTYPE html>
<style>
.scroller {
    width: 100px;
    height: 30px;
    overflow: scroll;
}
.scroller::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#t1 .scroller::-webkit-scrollbar:corner-present { background-color: red; }
#t1.t1 .scroller::-webkit-scrollbar:corner-present { background-color: green; }

#t2 .scroller::-webkit-scrollbar-button:decrement { background-color: red; }
#t2.t2 .scroller::-webkit-scrollbar-button:decrement { background-color: green; }

#t3 .scroller::-webkit-scrollbar-button:increment { background-color: red; }
#t3.t3 .scroller::-webkit-scrollbar-button:increment { background-color: green; }

#t4 .scroller::-webkit-scrollbar:horizontal { background-color: red; }
#t4.t4 .scroller::-webkit-scrollbar:horizontal { background-color: green; }

#t5 .scroller::-webkit-scrollbar:vertical { background-color: red; }
#t5.t5 .scroller::-webkit-scrollbar:vertical { background-color: green; }

#t6 .scroller::-webkit-scrollbar-button:start { background-color: red; }
#t6.t6 .scroller::-webkit-scrollbar-button:start { background-color: green; }

#t7 .scroller::-webkit-scrollbar-button:end { background-color: red; }
#t7.t7 .scroller::-webkit-scrollbar-button:end { background-color: green; }

</style>
<div id="t1">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div id="t2">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div id="t3">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div id="t4">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div id="t5">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div id="t6">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div id="t7">
    <div>
        <div class="scroller">FAIL</div>
    </div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<script>
function invalidateScroller(testId, expectedCount) {
    var testElement = document.getElementById(testId);
    var scroller = testElement.querySelector(".scroller");
    testElement.offsetTop; // Force recalc;
    testElement.className = testId;
    if (window.internals) {
        var count = internals.updateStyleAndReturnAffectedElementCount();
        if (count == expectedCount)
            scroller.innerText = "PASS";
        else
            scroller.innerText = "FAIL: "+count;
    }
}

// Invalidation counts are 2 (#t<n> and .scroller) plus pseudo elements

invalidateScroller("t1", 3); // pseudo count 2: 2 bars
invalidateScroller("t2", 7); // pseudo count 6: 2 bars + 4 buttons
invalidateScroller("t3", 7); // pseudo count 6: 2 bars + 4 buttons
invalidateScroller("t4", 3); // pseudo count 6: 2 bars + 4 buttons
invalidateScroller("t5", 3); // pseudo count 2: 2 bars
invalidateScroller("t6", 7); // pseudo count 6: 2 bars + 4 buttons
invalidateScroller("t7", 7); // pseudo count 6: 2 bars + 4 buttons
</script>
